<template>
    <div style="float: right;">
        <!-- 跳转路由并携带query参数，to的字符串写法 -->
        <router-link :to="`/router2/router2A?id=${id}&title=${title}`">router2A组件</router-link>
        <!-- 跳转路由并携带params参数，to的字符串写法，这种需要去配置一下path -->
        <!-- <router-link :to="`/router2/router2A/666/你好啊`">router2A组件</router-link> -->
        <br/>
        <!-- 跳转路由并携带query参数，to的对象写法 -->
        <router-link :to="{
            path: '/router2/router2B',
            // 把query改成params就可以变成第二种方式了
            query: {
                id,
                title,
            }
        }">
        router2B组件
        </router-link>
        <!-- 编程式路由导航写法 -->
        <button @click="pushShow">push查看</button>
        <div>
            <Keep-alive include="Router2A">
                <router-view></router-view> 
            </Keep-alive>
        </div>

        
    </div>
</template>

<script>
    export default {
        // eslint-disable-next-line vue/multi-word-component-names
        name: 'Router2',
        data() {
            return {
                id: 666,
                title: '你好啊'
            }
        },
        methods: {
            pushShow() {
                console.log('111', this.$route);
                this.$router.push({
                    name: 'router2B', //这是路由的名字事先要配置好，也可以通过路径来跳转
                    query: {
                        id: this.id,
                        title: this.title
                    }
                })
            }
        }
    }
</script>

<style scoped lang="less">

</style>